<template>
  <div class="screen">
    <mt-header title="完善资料" class="title">
      <router-link to="/main/me" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <div class="littleInterval"></div>
    <div>
        <div id="headImg">
          <div class="circle">
            <img src="../../assets/image/fine.jpg" class="commentAvatarImage" @click="openChoiceFrame">
            <div style="display:none">
              <input type="file" name="headPortrait" id="headPortrait">
            </div>
          </div>
        </div>

        <div>
          <mt-field label="姓名" placeholder="请输入真实姓名" v-model="userName"></mt-field>
          <mt-field label="出生年月" placeholder="点击选择" type="date" v-model="birthday"></mt-field>
          <!--<mt-field label="手机号码" placeholder="请输入手机号码" v-model="phoneNumber"></mt-field>-->
          <!--性别-->
          <div class="mint-cell mint-field">
            <div class="mint-cell-left"></div>
            <div class="mint-cell-wrapper">
              <div class="mint-cell-title">
                <span class="mint-cell-text">性别</span>
              </div>
              <div class="mint-cell-value">
                <div id="male_div" class="radio_div" @click="checkGender(0)">
                  <span class="mint-radio"><input  name="gender" type="radio" class="mint-radio-input" value="0" v-model="gender">
                    <span class="mint-radio-core"></span>
                  </span>
                  <span class="mint-radio-label">男</span>
                </div>
                <div id="female_div" @click="checkGender(1)">
                  <span class="mint-radio"><input name="gender" type="radio" class="mint-radio-input" value="1" v-model="gender"> <span class="mint-radio-core"></span></span>
                  <span class="mint-radio-label">女</span>
                </div>
              </div>
            </div>
          </div>
          <!-- 教育状态-->
          <div class="mint-cell mint-field">
            <div class="mint-cell-left"></div>
            <div class="mint-cell-wrapper">
              <div class="mint-cell-title">
                <span class="mint-cell-text">教育状态</span>
              </div>
              <div class="mint-cell-value">
                <div id="educationY_div" class="radio_div" @click="checkEducation(0)">
                  <span class="mint-radio"><input name="education"  type="radio" class="mint-radio-input" value="0" v-model="education" >
                    <span class="mint-radio-core"></span>
                  </span>
                  <span class="mint-radio-label">在读</span>
                </div>
                <div id="educationN_div" @click="checkEducation(1)">
                  <span class="mint-radio"><input name="education" type="radio" class="mint-radio-input" value="1" v-model="education">
                    <span class="mint-radio-core"></span>
                  </span>
                  <span class="mint-radio-label">已毕业</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      <div>
        <div id="enter_div">
          <mt-button type="default" size="large" @click.native="enterMain">进入主页</mt-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { Radio } from 'mint-ui';
  import { Toast } from 'mint-ui';
  import  Vue from 'vue'
  import { Progress } from 'mint-ui';

  Vue.component(Progress.name, Progress);
  Vue.component(Radio.name, Radio);
    export default {
        name: "PerfectInfoMation",
      data(){
          return{
            userName:'',
            birthday:'',
            phoneNumber:'',
            gender:'',
            education:'',
            educations:[
              {
                label:'在读',
                value:'0'
              },
              {
                label:'已毕业',
                value:'1'
              }
            ]
          }
      },
      methods:{
        checkGender(type){
           if(type=="0"){
             this.gender="0";
           }else{
             this.gender="1";
           }
          },
        checkEducation(type){
          if(type=="0"){
            this.education="0";
          }else{
            this.education="1";
          }
        },
        enterMain:function(){  //进入主页
          if(this.userName.trim()==""){
            Toast("姓名不能为空");
            return;
          }
          if(this.birthday.trim()==""){
            Toast("出生年月不能为空");
            return;
          }
          if(this.phoneNumber.trim()==""){
            Toast("手机号码不能为空");
            return;
          }
          if(this.gender.trim()==""){
            Toast("性别不能为空");
            return;
          }
          if(this.education.trim()==""){
            Toast("教育状态不能为空");
            return;
          }
        },
        openChoiceFrame:function(){ //打开选择框架
          $("#headPortrait").trigger("click");
        }
      }
    }
</script>

<style scoped>
  .littleInterval{
    height: 1rem;
    background-color: rgba(169, 169, 169, 0.08);
  }
  .radio_div{
    margin-right: 2rem;
  }
  .circle{
    width: 60px;
    height: 60px;
    padding:2px;
    background: #ececec;
    border-radius:100px;
    box-shadow: 0px 0px 1px rgba(0,0,0,0.4);
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    margin:1rem auto;

  }
  .commentAvatarImage{
    width:60px;
    height:60px;
    line-height: 0;
    /* remove line-height */
    display: inline-block;
    /* circle wraps image */
    border-radius: 50%;	/* relative value */
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    transition: linear 0.25s;
  }
  #headImg{
    height: 7rem;
    text-align: right;

  }
  #enter_div{
    width: 95%;
    margin: 2rem auto;
  }

</style>
